import { useState, useEffect } from 'react'
import { Select, Spin, Empty, message } from 'antd'
import style from './index.module.less'
import { EmployeeSchema } from '../schema/employeeSchema'
import { OptionSchema, getOptionsRequest } from './ajax'
import { awaitWrap } from '@src/assets/js/tool'

async function getOptions (setLoading: (v: boolean) => void, setOptions: (v: OptionSchema[]) => void, type: string, onjob?: number) {
  setLoading(true)
  const [e, d] = await awaitWrap(getOptionsRequest(type, onjob))
  setLoading(false)
  if (e === null && d !== null) {
    setOptions(d)
  }
}


// 渲染空的情况
function renderEmpty (loading: boolean) {
  if (loading) {
    return (
      <div className={style.empty}><Spin /></div>
    )
  }
  return <div className={style.empty}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
}

const { Option } = Select

interface Props {
  value?: string
  onChange?: (v: string) => void
  type?: string
  onjob?: number
}

function Main ({ value, onChange = () => {}, type = 'processer', onjob }: Props) {
  const [loading, setLoading] = useState(false)
  const [options, setOptions] = useState<OptionSchema[]>([])
  useEffect(() => {
    getOptions(setLoading, setOptions, type, onjob)
  }, [])
  return (
    <div className={style.container}>
      <Select defaultActiveFirstOption={false} filterOption={false} value={value} onChange={v => onChange(v)} placeholder='请选择秘书' allowClear notFoundContent={renderEmpty(loading)}>
        {options.map((li, i) => {
          return <Option key={`${li.employeeid}_${i}`} value={li.employeeid}>{li.employee}</Option>
        })}
      </Select>
    </div>
  )
}

export default Main

